<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default.html}">
<head>
    <title>机构</title>
</head>
<body>
<section layout:fragment="wrapper">
    <form class="layui-form" th:object="${entity}" action="">
        <div class="mainBox">
            <div class="main-container">
                <input type="hidden" name="id" th:value="*{id}">
                <div class="layui-form-item">
                    <label class="layui-form-label">父级</label>
                    <div class="layui-input-block">
                        <input type="text" name="parentId" th:value="*{parentId}" class="layui-hide">
                        <ul id="officeTree" class="dtree" data-id=""></ul>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" autocomplete="off" maxlength="20"
                               placeholder="请输入名称" class="layui-input" th:value="*{title}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" lay-verify="required" autocomplete="off" maxlength="50"
                               placeholder="请输入编码" class="layui-input" th:value="*{code}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required" lay-search>
                            <option value="0" th:selected="*{type == '0'}">集团</option>
                            <option value="1" th:selected="*{type == '1'}">公司</option>
                            <option value="2" th:selected="*{type == '2'}">部门</option>
                            <option value="3" th:selected="*{type == '3'}">科室</option>
                            <option value="4" th:selected="*{type == '4'}">小组</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="启用" th:checked="*{status ne '2'}">
                        <input type="radio" name="status" value="2" title="禁用" th:checked="*{status eq '2'}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" lay-verify="required|number" autocomplete="off" maxlength="10"
                               placeholder="请输入排序" class="layui-input" th:value="*{sort}" id="sort">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" lay-verify="title" autocomplete="off"
                               placeholder="请输入邮箱" class="layui-input" th:value="*{email}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="title" autocomplete="off"
                               placeholder="请输入电话" class="layui-input" th:value="*{phone}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">传真</label>
                    <div class="layui-input-block">
                        <input type="text" name="fax" lay-verify="title" autocomplete="off"
                               placeholder="请输入传真" class="layui-input" th:value="*{fax}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="title" autocomplete="off"
                               placeholder="请输入地址" class="layui-input" th:value="*{address}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮政编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="zipCode" lay-verify="title" autocomplete="off"
                               placeholder="请输入邮政编码" class="layui-input" th:value="*{zipCode}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">主负责人</label>
                    <div class="layui-input-block">
                        <input type="text" name="primaryPerson" lay-verify="title" autocomplete="off"
                               placeholder="请输入主负责人" class="layui-input" th:value="*{primaryPerson}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">副负责人</label>
                    <div class="layui-input-block">
                        <input type="text" name="deputyPerson" lay-verify="title" autocomplete="off"
                               placeholder="请输入副负责人" class="layui-input" th:value="*{deputyPerson}">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                        lay-filter="form-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
    <script th:inline="javascript">
        layui.use(['form', 'jquery', 'button', 'dtree', 'numberInput', 'button'], function () {
            let form = layui.form;
            let button = layui.button;
            let $ = layui.jquery;
            let dtree = layui.dtree;
            let numberInput = layui.numberInput;

            numberInput.render("#sort", {
                min: 0,
                step: 1,
            });

            let dtreeIns = dtree.render({
                elem: "#officeTree",
                initLevel: "1",
                width: '100%',
                method: 'post',
                url: '[(@{/a/sys/office/data})]',
                dataFormat: "list",
                dataStyle: "layuiStyle",
                response: {message: "msg", statusCode: '20000'},
                select: true,
                done: function(res, $ul, first){
                    if(first) {
                        let parentId = [[${entity.parentId}]];
                        if (parentId) {
                            dtreeIns.dataInit(parentId); // 选中节点
                            // 也可以在这里指定，第二个参数如果不填，则会自动返显当前选中的数据
                            dtreeIns.selectVal();
                        }

                        let id = [[${entity.id}]]
                        id && dtreeIns.setHideNodes([id]); // 设置节点隐藏
                    }
                }
            });

            dtree.on("node('officeTree')" ,function(obj){
                $('input[name="parentId"]').val(obj.param.nodeId);
            });

            form.on('submit(form-save)', function (data) {
                // 防止重复提交
                button.load({
                    elem: '[lay-submit]',
                    time: 2000,
                    done: function() {
                    }
                })

                $.ajax({
                    url: '[(@{/a/sys/office/save})]',
                    data: data.field,
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    type: 'post',
                    success: function (result) {
                        if (result.code === '20000') {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                                parent.layui.table.reload("tb-table");
                                parent.layui.dtree.reload("tb-tree");
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
                return false;
            });
        })
    </script>
</section>
>
</body>
</html>
